<template>
  <view class="original-text">
    <view class="original-text-head">
      <image style="width: 400px;" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
      <view class="original-text-left">
      
        <image round fit="cover" style="position: absolute; width: 20px; height: 20px; border-radius: 50px;" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
      </view>
      <view class="original-text-right">
        <van-icon name="share-o" size="20"/>
      </view>
    </view>
    <view class="original-text-content" align="left">
      <h1 style="font-size: 1.1rem">{{strategyDetail.strategyDetailTitle}}</h1>
      <h2 style="font-size: 0.8rem">方案说明</h2>
      <view>项目名称：{{strategyDetail.strategyDetailName}}</view>
      <view>项目地点：{{strategyDetail.strategyDetailPlace}}</view>
      <view>项目楼盘：{{strategyDetail.strategyDetailFloor}}</view>
      <view>项目面积：{{strategyDetail.strategyDetailArea}}㎡</view>
      <view>设计师：{{strategyDetail.strategyDetailDesigner}}</view>
      <view>案例说明：</view>
      <view>
        <view class="p-text-indent" v-for="strategyCase in strategyCaseList" :key="strategyCase.strategyCaseId">{{strategyCase.strategyCaseText}}</view>
      </view>

    </view>
    <view class="original-text-bottom">
      <view class="block-content-cen">
        <van-row text="8">
          <van-col text="14">
            <van-field v-model="value" placeholder="添加评论......" class="block-content-cen-input original-text-bottom-input"/>
          </van-col>
          <van-col text="8">
            <van-row>
              <van-col text="8">
                <view align="center">
                  <view><van-icon name="like-o" color="#777777" size="16"/></view>
                  <view style="font-size: 1rem">{{strategyDetail.strategy.constructionStrategyGood}}</view>
                </view>
              </van-col>
              <van-col text="8">
                <view align="center">
                  <view><van-icon name="star-o" color="#777777" size="16"/></view>
                  <view style="font-size: 1rem">{{strategyDetail.strategy.constructionStrategyCollection}}</view>
                </view>
              </van-col>
<!--              <van-col text="8">-->
<!--                <view align="center" @click="showPopup">-->
<!--                  <view><van-icon name="chat-o" color="#777777" size="16"/></view>-->
<!--                  <view style="font-size: 1rem">110</view>-->
<!--                </view>-->
<!--              </van-col>-->
            </van-row>
          </van-col>
        </van-row>
      </view>
    </view>
    <van-popup v-model="showP" closeable position="bottom" :style="{ height: '60%' }"></van-popup>
  </view>
</template>

<script>

  import { selectStrategyDetail,selectStrategyCaseList } from "@/api/constructionTeam/strategy.js";

  export default {
    name: "strategy_details",
    data(){
      return{
        showP: false,
        strategyDetail: Object,
        strategyCaseList:[],
        value:'',
      }
    },
	onLoad(openid) {
		var strategyId = openid.strategyId;
		this.getStrategyDetail(strategyId);
	},
    created() {
    
    },
    methods: {
      showPopup() {
        this.showP = true;
      },
      // 返回上一页
      toBack(){
        this.$router.go(-1);//返回上一层
      },
      // 查询施工攻略原文
      getStrategyDetail(strategyId){
        selectStrategyDetail(strategyId).then((res) =>{
          this.strategyDetail = res.data.data;
          this.getStrategyCaseList(res.data.data.strategyDetailId);
        })
      },
      getStrategyCaseList(strategyDetailId){
        selectStrategyCaseList(strategyDetailId).then((res) =>{
          this.strategyCaseList = res.data.data;
        })
      }
    }
  }
</script>

<style scoped>
  .original-text-head{
    position: relative;
  }
  .demo-nav__back{
    width: 24px;
    height: 24px;
  }
  .original-text-left{
    position: absolute;
    top: 0.6rem;
    left: 0.5rem;
    color: white;
    font-size: 0.8rem;
  }
  .original-text-left text{
    float: right;
    margin-top: 0.2rem;
    margin-left: 0.2rem;
  }
  .original-text-right{
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
  }
  .original-text-content{
    padding:0 2rem;
  }
  .original-text-content h1,h2{
    padding: 0.3rem 0;
  }
  .original-text-content p{
    padding: 0.3rem 0;
    font-size: 0.7rem;
    color: black;
  }
  .original-text-bottom{
    padding: 1rem 0 1rem 2rem;
  }
  .original-text-bottom-input{
    width: 80%;
    border-radius: 2rem;
    padding: 5px 16px;
    -moz-box-shadow:2px 2px 5px #333333;
    -webkit-box-shadow:2px 2px 5px #333333;
    box-shadow:2px 2px 5px #333333;
  }

</style>

